<template>
  <div>
    <el-dialog title="添加收费项" :visible.sync="visible" width="30%" @close="close">
      <div>
        <el-form :model="form" ref="form" :rules="rules" label-width="100px" :inline="false" size="normal">
          <el-form-item label="收费项名称:" prop="feeItemName">
            <el-select v-model="form.feeItemName" placeholder="请选择收费项目" filterable @change="changeFeeItem" value-key="feeItemId">
              <el-option v-for="item in unBindList" :key="item.feeItemId" :label="item.feeItemName" :value="item">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="费用:" prop="feeItemValue">
            <el-input
              v-model="form.feeItemValue"
              placeholder="请输入收费项费用"
              @keyup.native="form.feeItemValue = oninput(form.feeItemValue,2)"
              @blur="form.feeItemValue = oninput(form.feeItemValue,2)"
              clearable
              style="width:220px">
            </el-input>
          </el-form-item>
          <el-form-item v-if="form.feeItemId" label="收费类型:" prop="chargeItemsType">
<!--            <el-radio-group v-model="form.chargeItemsType">-->
<!--              <el-radio disabled v-for="dict in dict.type.charge_type"  v-if="dict.value!=3 && dict.value!=6" :key="dict.value" :label="parseInt(dict.value)">{{dict.label }}-->
<!--              </el-radio>-->
<!--            </el-radio-group>-->
            <dict-tag :options="dict.type.charge_type" :value="form.chargeItemsType"/>
          </el-form-item>
          <el-form-item label="备注:" prop="remark">
            <el-input
              maxlength="500" show-word-limit
              v-model="form.remark"
              type="textarea"
              placeholder="请输入内容"
              style="width:220px"
            />
          </el-form-item>

        </el-form>

      </div>
      <span slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="confim">确定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import { feeItemList } from '@/api/charteredBus/priceSetting';
export default {
  dicts: [
    'charge_type',
  ],
  data() {
    return {

      visible: false,
      feeItemList: [],
      unBindList: [],
      form: {
        feeItemId: null,
        feeItemName: null,
        feeItemValue: null,
        chargeItemsType:null,
        bindingCharges:null,
        remark: ''
      },
      rules: {
        feeItemName: [
          {
            required: true,
            message: '收费项名称不能为空',
            trigger: 'change',
          },
        ],
        feeItemValue: [
          {
            required: true,
            message: '费用不能为空',
            trigger: 'change',
          },
        ],
      }
    }
  },
  mounted() {
    this.getFeeItemList();
  },
  methods: {
    changeFeeItem(e) {
      console.log(e)
      this.form = { ...e };
    },
    getFeeItemList() {
      feeItemList().then(res => {
        this.feeItemList = res.data;
      })
    },
    show(bindList) {
      if (bindList.length > 0) {
        this.unBindList = this.feeItemList.filter((item) => {
          return !bindList.some(ele => ele.feeItemId === item.feeItemId);
        })
      } else {
        this.unBindList = this.feeItemList;
      }
      if (this.$refs.form != undefined) {
        this.$refs.form.resetFields();
      }
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
    confim() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.close();
          let currentFeeItem = { ...this.form };
          this.$emit('success', currentFeeItem);
        }
      });
    }
  },
}
</script>
<style lang="">

</style>
